<template>
  <div class="container">
    <!-- 新增筛选区域 -->
    <div class="filter-container">
      <el-row :gutter="20" justify="center" align="middle">
        <!-- 搜索框 -->
        <el-col :xs="24" :sm="12" :md="6" :lg="4">
          <el-input v-model="searchKeyword" placeholder="搜索商品" :prefix-icon="Search" clearable class="search-input"
            @input="handleSearch" />
        </el-col>

        <!-- 分类筛选 -->
        <el-col :xs="24" :sm="12" :md="6" :lg="4">
          <el-select v-model="selectedCategory" placeholder="全部分类" clearable class="category-select">
            <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-col>

        <!-- 价格区间 -->
        <el-col :xs="24" :sm="18" :md="12" :lg="8">
          <div class="price-filter">
            <el-input v-model.number="priceRange[0]" placeholder="最低价" type="number" min="0" class="price-input"
              @change="handlePriceChange(0)" />
            <span class="price-separator">-</span>
            <el-input v-model.number="priceRange[1]" placeholder="最高价" type="number" min="0" class="price-input"
              @change="handlePriceChange(1)" />
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 商品展示区域 -->
    <div class="goods-container">
      <el-row :gutter="20" justify="center" class="goods-row">
        <el-col v-for="product in filteredProducts" :key="product.id" :xs="24" :sm="12" :md="8" :lg="6" :xl="4"
          class="goods-col">
          <el-card class="product-card" @click="goGoodsDetail(product.id)" shadow="hover"
            :body-style="{ padding: '15px' }">
            <div class="image-container">
              <img :src="product.image" :alt="product.name" class="product-image" />
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-desc">{{ product.description }}</p>
              <div class="price-section">
                <span class="price-label">{{ product.category }}</span>
                <span class="product-price">¥{{ product.price }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div v-if="filteredProducts.length === 0" class="no-result">
        未找到相关商品
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();

interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  image: string;
  category: string;
}

// 商品数据（示例）
const products: Product[] = [
  {
    id: 1,
    name: "新鲜苹果",
    description: "烟台红富士 脆甜多汁",
    price: 12.8,
    image: "https://example.com/apple.jpg",
    category: "水果"
  },
  {
    id: 2,
    name: "有机菠菜",
    description: "无农药 新鲜采摘",
    price: 6.5,
    image: "https://example.com/spinach.jpg",
    category: "蔬菜"
  },
  {
    id: 3,
    name: "散养土鸡蛋",
    description: "天然散养 营养丰富",
    price: 15.0,
    image: "https://example.com/egg.jpg",
    category: "禽蛋"
  },
  // 更多示例数据...
];

// 筛选条件
const searchKeyword = ref("");
const selectedCategory = ref("");
const priceRange = ref<[number | null, number | null]>([null, null]);

// 商品分类选项
const categories = [
  { value: "水果", label: "水果" },
  { value: "蔬菜", label: "蔬菜" },
  { value: "禽蛋", label: "禽蛋" },
  { value: "肉类", label: "肉类" },
  { value: "粮油", label: "粮油" }
];

// 处理价格输入框值变化
const handlePriceChange = (index: number) => {
  if (priceRange.value[index] === "") {
    priceRange.value[index] = null;
  }
};

// 复合过滤逻辑
const filteredProducts = computed(() => {
  return products.filter(product => {
    // 关键词匹配（名称+描述）
    const keywordMatch = !searchKeyword.value ||
      [product.name, product.description].some(text =>
        text.toLowerCase().includes(searchKeyword.value.toLowerCase())
      );

    // 分类匹配
    const categoryMatch = !selectedCategory.value || product.category === selectedCategory.value;

    // 价格区间匹配
    const [minPrice, maxPrice] = priceRange.value;
    const price = product.price;
    const priceMatch =
      (minPrice === null || price >= minPrice) &&
      (maxPrice === null || price <= maxPrice);

    return keywordMatch && categoryMatch && priceMatch;
  });
});

// 路由跳转
const goGoodsDetail = (id: number) => {
  router.push({ name: "goodsDetail", params: { id } });
};

// 搜索处理（可添加防抖）
const handleSearch = () => {
  // 防抖逻辑...
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
}

.filter-container {
  padding: 20px;
  margin: 0 auto;
  max-width: 1200px;

  .el-row {
    margin-bottom: 20px;
  }
}

.search-input {
  :deep(.el-input__wrapper) {
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.category-select {
  width: 100%;

  :deep(.el-select__wrapper) {
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.price-filter {
  display: flex;
  align-items: center;
  gap: 10px;

  .price-input {
    flex: 1;

    :deep(.el-input__wrapper) {
      border-radius: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }

  .price-separator {
    color: #666;
    font-weight: 500;
  }
}

.goods-container {
  padding-top: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.no-result {
  text-align: center;
  color: #666;
  padding: 40px 0;
  font-size: 16px;
}

/* 保持原有的商品卡片样式 */
.goods-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .goods-row {
    margin: 0 -10px;
  }

  .goods-col {
    padding: 10px;
    transition: transform 0.3s;

    &:hover {
      transform: translateY(-5px);
    }
  }

  .product-card {
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s;

    &:hover {
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    }
  }

  .image-container {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    border-radius: 8px;
  }

  .product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }

  .product-info {
    padding: 15px 5px 5px;

    .product-name {
      color: #333;
      font-size: 16px;
      margin-bottom: 8px;
    }

    .product-desc {
      color: #666;
      font-size: 12px;
      line-height: 1.4;
      height: 36px;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .price-section {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .price-label {
        background: #ffefe5;
        color: #ff5000;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
      }

      .product-price {
        color: #ff5000;
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}
</style>